$(function() {
	layui.use(["laypage", "table", "form"], function() {
		var laypage = layui.laypage;
		var page, limit;
		var $ = layui.jquery;
		var form = layui.form
		var table = layui.table;
		var element = layui.element;

		table.render({
			elem: '#tb',
			url: '../user/findAll',
			toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
			defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
				title: '提示',
				layEvent: 'LAYTABLE_TIPS',


				icon: 'layui-icon-tips'
			}],
			height: 450,
			title: '员工数据表',
			cols: [
				[ //表头
					{
						type: 'checkbox',
						fixed: 'left'
						// style: 'text-align:center'
					},{
						field: 'u_name',
						title: '名字',
						width: 150,
						sort: true,
						fixed: true
					},
					{
						field: 'id',
						title: 'ID',
						width: 150,
						sort: true
						
					}, {
						field: 'u_phone',
						title: '手机',
						width: 200
					}, {
						field: 'u_doc_type',
						title: '证件类型',
						width: 200
					}, {
						field: 'u_doc_number',
						title: '证件号码',
						width: 200
					}, {
						field: 'u_sex',
						title: '性别',
						width: 100,
						sort: true
					}, {
						field: 'u_age',
						title: '年龄',
						width: 100
					}, {
						field: 'u_email',
						title: '个人邮箱',
						width: 150,
						sort: true
					}, {
						field: 'u_birthday',
						title: '出生日期',
						width: 150,
						sort: true
					}, {
						field: 'u_ismarry',
						title: '是否已婚',
						width: 150,
						sort: true
					}, {
						field: 'u_country',
						title: '国家地区',
						width: 200
					}, {
						field: 'u_nation',
						title: '民族',
						width: 150
					},  {
						field: 'u_politics',
						title: '政治面貌',
						width: 150
					}, {
						field: 'u_native',
						title: '籍贯',
						width: 150
					},{
						field: 'u_health',
						title: '健康状况',
						width: 100
					},{
						field: 'u_education',
						title: '最高学历',
						width: 100
					}, {
						field: 'u_job_number',
						title: '工号',
						width: 100
					}, {
						field: 'u_department',
						title: '部门',
						width: 150
					}, {
						field: 'u_entry_time',
						title: '入职时间',
						width: 150
					}, {
						field: 'u_job',
						title: '岗位',
						width: 100
					}, {
						field: 'u_superior',
						title: '直属上级',
						width: 100
					},{
						fixed: 'right',
						title: '操作',
						width: 200,
						align: 'center',
						toolbar: '#barDemo'
					}]],
		/*	data: [{
				"id":1,
				"u_name": "张三",
				"u_phone": "18778762534",
				"u_doc_type": "身份证",
				"u_doc_number": "4408232663538",
				"u_sex": "女",
				"u_age": "28",
				"u_email":"22@@qq.com",
				"u_birthday": "2000/10/10",
				"u_ismarry": "否",
				"u_country": "广东广州",
				"u_nation": "汉族",
				"u_health": "健康",
				"u_education": "硕士",
				"u_job_number": "11028",
				"u_department": "人事部",
				"u_entry_time": "2020-1-1",
				"u_job": "客服",
				"u_superior": "经理",
				"u_politics": "党员",
				"u_native": "广东广州"
			}],*/
			page: true,
			id: 'testReload',
			parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
			return {
				"code": res.code, //解析接口状态
				"msg": res.msg, //解析提示文本
				"count": res.count, //解析数据长度
				"data": res.data //解析数据列表
			}}
		});


		//监听表格复选框选择
		table.on('checkbox(cu_demo)', function(obj) {
			console.log(obj)
		});

		//监听表格操作
		table.on('tool(cu_demo)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象

			if (layEvent === 'del') { //删除
				layer.confirm('真的删除ID为：' + data.d + "的用户吗?", function(index) {

					console.log(data.id);
					//向服务端发送删除指令
					$.ajax({
						url: '/userDel',
						type: 'POST',
						data: {
							'id': data.id
						}, //向服务端发送删除的id
						success: function(message) {
							if (message.code == 0) {
								obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
								layer.close(index);
								console.log(index);
								layer.msg("删除成功", {
									icon: 1
								});
							} else {
								layer.msg("删除失败", {
									icon: 5
								});
							}
						}
					});
					layer.close(index);
				});

			} else if (layEvent === 'edit') { //编辑
				console.log(data);
				layer.open({
					//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
					type: 1,
					
					title: "修改员工信息",
					shade: 0.8,
					area: ['800px', '80%'],
					shadeClose: false,
					content: $("#add_management")
				});
				//动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
				// setFormValue(obj, data);

			}
		});

		


		//下拉选择框的监听
		form.on('select(cu_select)', function(data) {
			console.log(data.elem); //得到select原始DOM对象
			console.log(data.value); //得到被选中的值
			console.log(data.othis); //得到美化后的DOM对象
		});


		//创建员工弹出层
		//alert
		$("#cu_create").on("click",function() {
			//input here
			layer.open({
				type: 2,
				 title: 'CRM欢迎您',
				// shadeClose: true,
				shade:  [0.7, '#393D49'],
				area: ['800px', '80%'],
				// shadeClose: false,
				
				content: 'add_management.html', //iframe的url
				/* end: function() { //刷新页面
					location.reload();
				} */
			});
			//input above
		});

		//删除所有客户弹出层
		//alert
		$("#cu_del").click(function() {
			layer.alert("是否要删除全部客户");
			console.log(cu_form)
			$.ajax({
				type: "POST",
				url: "",
				//data: ,
				dataType: "JSON",
				success: function(data) {
					if (data.flag) {
						layer.closeAll();
						parent.location.reload();
					}
				}
			});
		});

		//搜索按钮
		$('#search_btn').click(function() {
			var inputVal = $('#cu_input').val();
			console.log(inputVal);
			if(inputVal==''|| inputVal==null){
			table.reload('testReload', {
				url: '../user/findAll',

				// ,methods:"post"
				/*request: {
					pageName: 'page', //页码的参数名称，默认：page
					limitName: 'pageSize' //每页数据量的参数名，默认：limit
				},*/
				where: {
					u_name: inputVal  //设置需要传递的参数
				},
				page: {
					curr: 1  //条件查询从第一页开始，否则从当前页面开始
				}
			});
			}else {
				table.reload('testReload', {
					url: '../user/findByName',
					//methods:"post"
					where: {
						u_name: inputVal //设置需要传递的参数

					},
					page: {
						curr: 1 //条件查询从第一页开始，否则从当前页面开始
					}
				});
			}
		});
        //键盘enter键
        $('.layui-input').keydown(function (e) {//当按下按键时
            if (e.which == 13) {//.which属性判断按下的是哪个键，回车键的键位序号为13
                // $('button.search123').trigger("click");//触发搜索按钮的点击事件
                $("#search_btn").click();
            }
        });
//8.清空输入框
        //显示清空按钮
        $('#search_box').mouseover(function() {
            var inputVal = $(cu_input).val();
            $('#inputClear').removeClass('layui-hide');
        })

        //不显示清空按钮
        $('#search_box').mouseout(function() {
            var inputVal = $(cu_input).val();
            $('#inputClear').addClass('layui-hide');
        })

        $('#inputClear').click(function() {
            var inputVal = $('#cu_input').val();
            if (inputVal != '' || inputVal != null) {
                console.log("清空输入框")
                $('#cu_input').val('');
            }
        })

	})
})
